<%--
  Created by IntelliJ IDEA.
  User: Later
  Date: 2021/5/31
  Time: 18:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/bootstrap/css/bootstrap.min.css">
</head>
<style>
    .updateInfo li{
        float: left;
        list-style: none;
        width: 100px;

    }

    .updateInfo{
        display: none;

    }
    .closebutton{

        float: right;
        margin-right: 150px;
    }
</style>
<body>
<form class="formBox text-center" style="margin-top: 30px;margin-left: 30px">
    <p>
        用户名: <input type="text" name="username" id="username">
        密码: <input type="text" name="password" id="password">
        起始时间:<input type="date" name="strDate" id="strDate">
        结束时间:<input type="date" name="endDate" id="endDate">
        VIP:
        <select name="vip" id="vip">
            <option value="">不限</option>
            <option value="钻石">钻石</option>
            <option value="黄金">黄金</option>
        </select>
        钱包金额:<input type="text" name="money" id="money">
    </p>
    订单ID:<input type="number" name="orderid" id="orderid">
    头像: <input type="text" name="heading" id="heading">
    金币: <input type="number" name="cash" id="cashs">
    电话: <input type="text" name="phone" id="phone">
    邮箱: <input type="text" name="email" id="email">
    红包ID: <input type="number" name="packetid" id="packetid">
</form>
<table class="msgBox table-hover table-bordered table" border="1px solid"width="100%" style="margin-top: 20px;line-height: 30px;text-align: center">
    <thead>
    <tr>
        <td>用户名</td>
        <td>密码</td>
        <td>注册时间</td>
        <td>VIP</td>
        <td>钱包余额</td>
        <td>订单ID</td>
        <td>头像地址</td>
        <td>金币</td>
        <td>电话</td>
        <td>邮箱</td>
        <td>红包ID</td>
        <td colspan="3">操作</td>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div class="text-center">
每页显示
<select name="pageSize" id="pageSize">
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="10">10</option>
</select>
条----

当前第<sapn class="pages"></sapn>页
<ul class="pageBox" style="list-style: none;">
</ul>
</div>
<hr>
<h1 class="text-center">添加用户</h1>
<form action="${pageContext.request.contextPath}/insertH" method="post" enctype="multipart/form-data" class="text-center">
    <input type="text" placeholder="用户名" name="username" id="name">
    <input type="password" placeholder="用户密码" name="password" id="passwd">
    <input type="date" placeholder="注册时间" name="regtime" id="time">
    <input type="text" placeholder="用户等级" name="vip" id="vip1">
    <input type="number" placeholder="余额" name="money" id="num">
    <input type="number" placeholder="订单ID" name="orderid" id="oid">
    图片：<input type="file" name="uimg" id="simg">
    <input type="number" placeholder="金币" name="cash" id="qian">
    <input type="text" placeholder="电话" name="phone" id="phone1">
    <input type="text" placeholder="邮箱" name="email" id="email1">
    <input type="number" placeholder="红包ID" name="packetid" id="tid">
    <br>
    <input type="submit" value="添加" id="a"/>
</form>
<div class="updateInfo" border="1" >
    <button class="closebutton" onclick="closeinfo()">关闭</button>
    <li>用户名</li>
    <li>密码</li>
    <li>注册时间</li>
    <li>VIP</li>
    <li>钱包余额</li>
    <li>订单ID</li>
    <li>头像地址</li>
    <li>金币</li>
    <li>电话</li>
    <li>邮箱</li>
    <li>红包ID</li>
    <li>操作</li>
    <br>

    <li><input type="text" style="width: 70px"
               class="yh"></li>
    <li><input type="text" style="width: 70px"
               class="mm"></li>
    <li><input type="text" style="width: 70px"
               class="zc"></li>
    <li><input type="text" style="width: 70px"
               class="vip"></li>
    <li><input type="text" style="width: 70px"
               class="qb"></li>
    <li><input type="text" style="width: 70px"
               class="dd"></li>
    <li><input type="text" style="width: 70px"
               class="tx"></li>
    <li><input type="text" style="width: 70px"
               class="jb"></li>
    <li><input type="text" style="width: 70px"
               class="dh"></li>
    <li><input type="text" style="width: 70px"
               class="yx"></li>
    <li><input type="text" style="width: 70px"
               class="hb"></li>
    <li><button class="updateUser">修改</button></li>
</div>
</body>
<script src="${pageContext.request.contextPath}/vendor/jquery/jquery.min.js"></script>
<script>
    $(function(){
        getUser();
        x();
        $(".formBox").change(function(){
            getUser();
        })
        $("#pageSize").change(function(){
            getUser();
        })
        $("#passwd,#simg,#name,#num,#time,#vip1,#oid,#qian,#phone1,#email1,#tid").change(function () {
            $("#a").attr("disabled", false);
        })
    })
    function x() {
        $("#a").click(function(){
            if ($("#simg").val() == "") {
                $("#a").attr("disabled", "disabled");
                alert("图片不能为空");
            } else if($("#name").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("商品名称不能为空");
            } else if($("#num").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("金额不能为空");
            } else if($("#vip1").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("用户等级不能为空");
            } else if($("#oid").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("订单ID不能为空");
            } else if($("#tid").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("红包ID不能为空");
            } else if($("#time").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("注册时间不能为空");
            }else if($("#tate").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("付款状态不能为空");
            }else if($("#passwd").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("密码不能为空");
            }else if($("#qian").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("金币不能为空");
            }else if($("#phone1").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("电话不能为空");
            }else if($("#email1").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("邮箱不能为空");
            }
        })
    }

    function closeinfo() {
        $(".updateInfo").hide();

    }
    function tc(userid) {
        $(".updateInfo").show();
        var url="${pageContext.request.contextPath}/selectUserById/"+userid;
        $.ajax({
            url:url,
            method:"POST",
            data:{"userid":userid},
            success:function(data) {
                console.log(data);
                $(".yh").val(data.username);
                $(".mm").val(data.password);
                $(".zc").val(data.regtime);
                $(".vip").val(data.vip);
                $(".qb").val(data.money);
                $(".dd").val(data.orderid);
                $(".tx").val(data.heading);
                $(".jb").val(data.cash);
                $(".dh").val(data.phone);
                $(".yx").val(data.email);
                $(".hb").val(data.packetid);
                $(".updateUser").attr("onclick",'updateUser('+data.userid+')');
            }
        })
    }
    function jy(userid,uservip) {
        if(uservip=="已禁言"){
            uservip="无";
            var url="${pageContext.request.contextPath}/updateUserVipById/"+userid+"/"+uservip;
            $.ajax({
                url:url,
                method:"POST",
                data:{"userid":userid,"uservip":uservip},
                success:function(data) {
                    if(data==1){
                        alert("解禁成功");
                        getUser();

                    }
                }
            })
        }else{
            uservip="已禁言";
            var url="${pageContext.request.contextPath}/updateUserVipById/"+userid+"/"+uservip;
            $.ajax({
                url:url,
                method:"POST",
                data:{"userid":userid,"uservip":uservip},
                success:function(data) {
                    if(data==1){
                        alert("禁言成功");
                        getUser();

                    }
                }
            })
        }

    }

    function updateUser(userid) {
        var username = $(".yh").val();
        var password = $(".mm").val();
        var regtime = $(".zc").val();
        var vip = $(".vip").val();
        var money = $(".qb").val();
        var orderid = $(".dd").val();
        var heading = $(".tx").val();
        var cash = $(".jb").val();
        var phone = $(".dh").val();
        var email = $(".yx").val();
        var packetid = $(".hb").val();
        var data={
            "userid":userid,
            "username":username,
            "password":password,
            "regtime":regtime,
            "vip":vip,
            "money":money,
            "orderid":orderid,
            "heading":heading,
            "cash":cash,
            "phone":phone,
            "email":email,
            "packetid":packetid}
        var url="${pageContext.request.contextPath}/updateUser";
        $.ajax({
            url:url,
            method:"POST",
            data:data,
            success:function(data) {
                console.log(data);
                if(data==1){
                    alert("修改成功");
                    $(".updateInfo").hide();
                    getUser();
                }else {
                    alert("修改失败");
                    getUser();
                }
            }
        })
    }

    function getUser(pageNum) {
        $("tbody").empty();
        var url = "${pageContext.request.contextPath}/getUsers";
        var username = $("#username").val();
        var password = $("#password").val();
        var regtime = $("#regtime").val();
        var vip = $("#vip").val();
        var money = $("#money").val();
        var orderid = $("#orderid").val();
        var heading = $("#heading").val();
        var cash = $("#cash").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var packetid = $("#packetid").val();
        var strDate = $("#strDate").val();
        var endDate = $("#endDate").val();
        var pageSize = $("#pageSize").val();
        var user  = {
            "username":username,
            "password":password,
            "regtime":regtime,
            "vip":vip,
            "money":money,
            "orderid":orderid,
            "heading":heading,
            "cash":cash,
            "phone":phone,
            "email":email,
            "packetid":packetid,
            "strDate":strDate,
            "endDate":endDate,
            "pageSize":pageSize,
            "pageNum":pageNum
        };
        $.ajax({
            url:url,
            method:"post",
            data:user,
            success:function(data){
                var users = data.list;
                for(var i = 0;i<users.length;i++){
                    var $tr = $("<tr>");
                    $(".msgBox").append($tr);
                    var $username = $("<td id='username'>");
                    var $password = $("<td id='password'>");
                    var $regtime = $("<td id='regtime'>");
                    var $vip = $("<td id='vip'>");
                    var $money = $("<td id='money'>");
                    var $orderid = $("<td id='orderid'>");
                    var $heading = $("<td id='heading'>");
                    var $img=$("<img src='"+users[i].heading+"' width='30px' height='30px'>");
                    $heading.append($img);
                    var $cash = $("<td id='cash'>");
                    var $phone = $("<td id='phone'>");
                    var $email = $("<td id='email'>");
                    var $packetid = $("<td id='packetid'>");
                    var $del =  $("<td>");
                    var $upt =  $("<td>");
                    var $jy =  $("<td>");
                    var $btn = $("<button>删除</button>");
                    var $uptbtn = $("<button>修改</button>");
                    var $jybtn=$("<button class='jy"+users[i].userid+"'>禁言</button>")
                    $btn.attr("onclick",'deleteUser('+users[i].userid+')');
                    $uptbtn.attr("onclick",'tc('+users[i].userid+')');
                    $jybtn.attr("onclick",'jy('+users[i].userid+',"'+users[i].vip+'")');
                    $del.append($btn);
                    $upt.append($uptbtn);
                    $jy.append($jybtn);
                    $username.html(users[i].username);
                    $password.html(users[i].password);
                    $regtime.html(users[i].regtime);
                    $vip.html(users[i].vip);
                    $money.html(users[i].money);
                    $orderid.html(users[i].orderid);

                    $cash.html(users[i].cash);
                    $phone.html(users[i].phone);
                    $email.html(users[i].email);
                    $packetid.html(users[i].packetid);

                    $tr.append($username).append($password).append($regtime).append($vip).append($money).append($orderid).append($heading).append($cash).append($phone).append($email).append($packetid).append($del).append($upt).append($jy);
                    if(users[i].vip=="已禁言"){
                        $(".jy"+users[i].userid+"").html("解禁");
                    }else {
                        $(".jy"+users[i].userid+"").html("禁言");
                    }
                }
                makePage(data);
            }
        })
    }
    function deleteUser(userId) {
        var url = "${pageContext.request.contextPath}/user/"+userId;
        $.ajax({
            url:url,
            method:"DELETE",
            data: {"userId":userId},
            success:function (data) {
                if(data=1){
                    alert("删除成功");
                    getUser();
                }
            }
        })
    }




    function makePage(data) {
        $(".pageBox").empty();
        var isFirstPage = data.isFirstPage;
        var isLastPage = data.isLastPage;
        var hasNextPage = data.hasNextPage;
        var hasPreviousPage = data.hasPreviousPage;
        var navigatePageNums = data.navigatepageNums;
        var currentPageNum = parseInt(data.pageNum);
        $(".pages").html(currentPageNum);
        console.log(data)
        console.log(currentPageNum)
        if(isFirstPage !=true){
            $li = $("<li></li>");
            $a = $("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getUser("+1+")").text("首页");
            $(".pageBox").append($li);
        }
        if(hasPreviousPage ==true){
            var num =currentPageNum-1;
            $li = $("<li></li>");
            $a = $("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getUser("+num+")").text("上一页");
            $(".pageBox").append($li);
        }
        for(var i = 0;i<navigatePageNums.length;i++){
            var num = navigatePageNums[i];
            $li = $("<li></li>");
            $a = $("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getUser("+num+")").text(num);
            $(".pageBox").append($li);
        }
        if(isLastPage !=true){
            var lastPages = parseInt(data.pages);
            $li = $("<li></li>");
            $a = $("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getUser("+lastPages+")").text("尾页");
            $(".pageBox").append($li);

        }
        if(hasNextPage ==true){
            var num =currentPageNum + 1;
            $li = $("<li></li>");
            $a = $("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getUser("+num+")").text("下一页");
            $(".pageBox").append($li);
        }
    }
</script>
</html>
